import { globalStyle, style } from '@vanilla-extract/css';
import { vars } from '../../theme/vars.css';

export const iconInputStyle = style({
	display: 'inline-flex',
	alignItems: 'center',
	border: `1px solid ${vars.color.border}`,
	color: vars.color.text,
	borderRadius: vars.layout.smallRadius,
	// transition: 'border-color .2s',
	fontSize: '1rem',
	overflow: 'hidden',
	lineHeight: vars.layout.inputHeight,
	backgroundColor: vars.color.panelBackground,
	outline: 'none',
	boxSizing: 'border-box',
	minWidth: 0,
	width: '20em',
	selectors: {
		'&:hover': {
			borderColor: vars.color.secondaryText,
		},
		'&:focus-within': {
			borderColor: vars.color.accent,
			boxShadow: `0 0 2px ${vars.color.accent}`,
		},
		'&.verify:has(input:invalid)': {
			color: vars.color.danger,
			borderColor: vars.color.danger,
			boxShadow: `0 0 1px ${vars.color.danger}`,
		},
		'&.verify:has(input:valid)': {
			borderColor: vars.color.success,
			boxShadow: `0 0 1px ${vars.color.success}`,
		},
		'&:has(input:disabled)': {
			cursor: 'default',
			color: vars.color.disabledText,
			borderColor: vars.color.disabledText,
		},
	},
});

globalStyle(`${iconInputStyle}>input`, {
	border: 'none',
	alignSelf: 'stretch',
	backgroundColor: 'transparent',
	color: vars.color.text,
	fontSize: '1rem',
	lineHeight: vars.layout.inputHeight,
	outline: 'none',
	flex: 1,
	padding: '0 0.4em',
	boxSizing: 'border-box',
	minWidth: 0,
});
globalStyle(`${iconInputStyle}.select>input`, {
	cursor: 'pointer',
});
globalStyle(`${iconInputStyle}>svg`, {
	width: '1.4em',
	height: '1.4em',
	fill: vars.color.text,
	flexGrow: 0,
	flexShrink: 0,
});
globalStyle(`${iconInputStyle}.select>svg`, {
	cursor: 'pointer',
});
globalStyle(`${iconInputStyle}>svg.prefix-icon`, {
	marginLeft: '0.4em',
});
globalStyle(`${iconInputStyle}>svg.suffix-icon`, {
	marginRight: '0.4em',
});
globalStyle(`${iconInputStyle}>svg.clear-icon`, {
	display: 'none',
	margin: '0 0.4em',
});
globalStyle(`${iconInputStyle}>svg.show-clear.clear-icon`, {
	display: 'inline-block',
});
globalStyle(
	`${iconInputStyle}:has(input:placeholder-shown,input:disabled,input:read-only)>svg.clear-icon`,
	{
		display: 'none',
		margin: '0 0.4em',
	},
);

globalStyle(
	`${iconInputStyle}>input::-webkit-input-placeholder,${iconInputStyle}>input::placeholder`,
	{
		color: vars.color.placeholderText,
	},
);

globalStyle(`${iconInputStyle}:has(input:disabled)>:is(svg,input)`, {
	cursor: 'default',
	color: vars.color.disabledText,
	fill: vars.color.disabledText,
});

globalStyle(
	`${iconInputStyle}:has(input:disabled)>input::-webkit-input-placeholder,${iconInputStyle}:has(input:disabled)>input::placeholder`,
	{
		color: vars.color.disabledText,
	},
);
